.

iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0
Modern Web

Dear React 修煉之路系列 第 10

(D-10) Dear React 修煉之路: props|React.Children.map()

  • 分享至 

  • xImage
  •  

大家好哇~轉眼間來到了鐵人賽第10天,同時也是學習 React 的第10天,透過每日一點一點的紀錄學習內容,希望對 React 的使用方法能有更加深的印象

接續children屬性,React 提供了 React.Children 函式讓我們能夠調用props children的資料

React.Children.map()

map()的功能是什麼
透過函式內所回傳的值組合成一個新的陣列(Array),並且不會改變原本的陣列,回傳數量會等於原始的長度。

App.js中寫入陣列(Array)資料

import Card from "./Card";
import "./styles.css";

export default function App() {
  return (
    <Card>
      {(function CardData() {
        return ["小卡1", "小卡2", "小卡3"];
      })()}
    </Card>
  );
}

Card的Component中使用React.Children.map()函式來調用資料

import React from "react";


const Card = (props) => {
  return (
    <div>
      {React.Children.map(props.children, (child,i) => {
        return <h1>{child}</h1>;
      })}
    </div>
  );
};

export default Card;

https://ithelp.ithome.com.tw/upload/images/20220925/20148303jkYG2vRKjd.png

參考資料:
MDN-Array
React官方文件


上一篇
(D-9) Dear React 修煉之路: props|children
下一篇
(D-11) Dear React 修煉之路:props|React.Children
系列文
Dear React 修煉之路30
.
圖片
  直播研討會

尚未有邦友留言

立即登入留言